@extends('layouts.console_header')

@section('title', '地区用户详情')

@section('resources')
    @parent
	<style>
		input[type ='button']{width: 100px;height: 40px;border-radius: 5px;font-size: 18px;}
		.user_details_title{overflow: hidden;width: 300px;height: 30px;margin: 20px auto;}
		.user_details_title span{float: left;width: 98px;border: 1px solid #ccc;text-align: center;line-height: 28px;cursor: pointer;}
		.user_details_list table{border-collapse:collapse;display: none;}
		.user_details_list table thead tr{border: 1px solid #ccc;}
		.user_details_list table td{text-align: center;padding: 5px;}
		#last_page{background-color: #9955c6;float: left;display: none;}
		#next_page{background-color: #9955c6;float: right;display: none;}
		.bigpic_out{position: fixed;width: 100%;top: 0;left: 0;display: none;background: rgba(0,0,0,0.5);}
		.bigpic_out .bigpic_img{position: fixed;width: 100%;top: 0;left: 0;}
		.bigpic_out .bicpic_close{position: absolute;top: 50px;right: 50px;}
		.bigpic_out .pic_show{position: absolute;top: 50%;left: 50%;opacity: 0;}
		.bigpic_out .pic_left{width: 34px;height: 60px;font-size: 40px;text-align: center;line-height: 100px;position: absolute;top: 50%;left: 100px;margin-top: -30px;cursor: pointer;}
		.bigpic_out .pic_right{width: 34px;height: 60px;font-size: 40px;text-align: center;line-height: 100px;position: absolute;top: 50%;right: 100px;margin-top: -30px;cursor: pointer;}
		.bigpic_out .bicpic_close{cursor: pointer;}
		.bigpic_out .pic_num{position: fixed;bottom: 50px;left: 49%;color: #fff;font-size: 18px;padding: 5px 10px;background: rgba(0,0,0,0.5);}
	</style>
@endsection

@section('content')
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;">
		    <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>用户版运营><a href="/console/regoin/user/list">地区用户</a>></span>
		    <span class="co_violet">详情</span>
        </p>
		<a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
	</div>
	<div class="details1" style="background-color: #fff;">
		<p>基本信息</p>
		<div class="details1_name">
			<ul class="fl">
				<li>
					<span>用户账号</span>
					<span>{{$mobile}}</span>
				</li>
				<li>
					<span>用户昵称</span>
					<span>{{$nickname}}</span>
				</li>
				<li>
					<span>生日</span>
					@if($birthday == '0000-00-00 00:00:00'||$birthday == '0000-00-00' || $birthday == '')
						<span>无</span>
					@else
						<span>{{date('Y-m-d', strtotime($birthday))}}</span>
					@endif
				</li>
				<li>
					<span>用户地区</span>
					<span>{{$registerarea}}</span>
				</li>
				<li>
					<span>最近访问</span>
					<span>{{$logintime}}</span>
				</li>
			</ul>
			<ul class="fl">
				<li>
					<span>注册时间</span>
					<span>{{date('Y-m-d H:i', strtotime($created_at))}}</span>
				</li>
				<li>
					<span>性别</span>
					@if($sex == '1')
						<span>男</span>
					@elseif($sex == '2')
						<span>女</span>
					@else
						<span>未知</span>
					@endif
				</li>
				<li>
					<span>积分</span>
					<span>{{$point}}</span>
				</li>
				<li>
					<span>用户来源</span>
					<span>
						@if($saletype == 1)
							商家地推(代理商：{{$cityname}} 市代   商家代码:{{$shopcode}})
						@elseif($saletype == 2)
							个人地推(姓名：{{$salemanname}} 手机号：{{$salemobile}})
						@else
							默认
						@endif
					</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="user_details">
		<p class="user_details_title">
			<span class="order" style="border: 1px solid #9955c6;color: #9955c6;">本地消费</span>
			<span class="comment">本地评论</span>
			<span class="redenvelope">红包</span>
		</p>
		<div class="user_details_list">
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
		        <thead>
		            <tr>
		                <td>序号</td>
		                <td>消费单号</td>
		                <td>商家代码</td>
		                <td>门店名称</td>
		                <td>买单方式</td>
		                <td>消费金额</td>
		                <td>使用红包</td>
		                <td>实付金额</td>
		                <td>获得红包</td>
		                <td>订单时间</td>
		            </tr>
		        </thead>
		        <tbody id="tbody_consume">
		            
		        </tbody>
		    </table>
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
		        <thead>
		            <tr>
		                <td>序号</td>
		                <td>消费单号</td>
		                <td>商家代码</td>
		                <td>门店名称</td>
		                <td>评分</td>
		                <td>评价内容</td>
		                <td>评价图片</td>
		                <td>评价时间</td>
		            </tr>
		        </thead>
		        <tbody id="tbody_comment">
		            
		        </tbody>
		    </table>
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
		        <thead>
		            <tr>
		                <td>序号</td>
		                <td>红包金额</td>
		                <td>使用范围</td>
		                <td>使用期限</td>
		                <td>红包状态</td>
		                <td>领取时间</td>
		            </tr>
		        </thead>
		        <tbody id="tbody_red_envelope">
		            
		        </tbody>
		    </table>
		</div>
		<p style="margin-top: 20px;">
			<button id="last_page">上一页</button>
			<button id="next_page">下一页</button>
		</p>
	</div>
</section>
<div class="bigpic_out">
	<p class="bigpic_img"></p>
	<img class="bicpic_close" src="{{env('IMAGE_DOMAIN')}}images/close_p.png"" alt="">
	<img class="pic_left" src="/images/pc/left.png?v={{env('IMAGE_VERSION')}}" alt="">
	<img class="pic_right" src="/images/pc/right.png?v={{env('IMAGE_VERSION')}}" alt="">
	<p class="pic_num"></p>
</div>
@endsection

@section('scriptResources')
    @parent
<script>
    var cityid = '{{$cityid}}';
    var userid = '{{$userid}}';
	var userid = '{{$userid}}';
	var cityid = '{{$cityid}}';
	var type = 'order';
	var page = 1;
	var length = 10;
    var pic_array = [];
	$('.user_details_list table').eq(0).show();
	//获取用户详细信息
	function usercount(type,page){
		$.ajax({
			url : "/console/user/getbytype",
			type : "get",
			data :{
				userid:userid,
				cityid:cityid,
				type:type,
				page:page,
				length:length
			},
			dataType : "json",
			success:function(data){
				if(data.status == "success"){
					var data = data.data;
					if(data.length<10){
						$("#next_page").hide();
					}else{
						$("#next_page").show();
					}
					if(page <=1){
						$("#last_page").hide();
					}else{
						$("#last_page").show();
					}
					if(type=="order"){//消费
						if(data ==""){
							$("#tbody_consume").html("<tr><td colspan='11' style='font-size: 18px;color: #333;'>~消费无数据~</td></tr>");return;
						}else{
							$("#tbody_consume").empty();
							for (var i = 0; i < data.length; i++) {
								if(data[i].path == null){
									data[i].path = '';
								};
                                if(data[i].refundstatus == 1){
                                    var tr = $('<tr>'+
                                        '<td>'+(i+(page-1)*10+1)+'</td>'+
                                        '<td style="overflow: hidden;"><img style="width: 32px;float: left;margin-top: 2px;" src="/images/console/refund.png" alt=""><span style="float: left;line-height: 32px;">'+data[i].ordernumber+'</span></td>'+
                                        '<td>'+data[i].code+'</td>'+
                                        '<td>'+data[i].shopname+'</td>'+
                                        '<td>'+(data[i].path == "user"?"用户发起":"商家发起")+'</td>'+
                                        '<td>'+data[i].orderamount+'</td>'+
                                        '<td>'+data[i].redenvelopeamount+'</td>'+
                                        '<td>'+data[i].actualamount+'</td>'+
                                        '<td>'+data[i].bonus+'</td>'+
                                        '<td>'+data[i].created_at+'</td>'+
                                        '</tr>');
								}else {
                                    var tr = $('<tr>'+
                                        '<td>'+(i+(page-1)*10+1)+'</td>'+
                                        '<td>'+data[i].ordernumber+'</td>'+
                                        '<td>'+data[i].code+'</td>'+
                                        '<td>'+data[i].shopname+'</td>'+
                                        '<td>'+(data[i].path == "user"?"用户发起":"商家发起")+'</td>'+
                                        '<td>'+data[i].orderamount+'</td>'+
                                        '<td>'+data[i].redenvelopeamount+'</td>'+
                                        '<td>'+data[i].actualamount+'</td>'+
                                        '<td>'+data[i].bonus+'</td>'+
                                        '<td>'+data[i].created_at+'</td>'+
                                        '</tr>');
								}
								$("#tbody_consume").append(tr);
							};
						}

					}else if(type=="comment"){//评论
						if(data ==""){
							$("#tbody_comment").html("<tr><td colspan='8' style='font-size: 18px;color: #333;'>~评论无数据~</td></tr>");return;
						}else{
							$("#tbody_comment").empty();
							for (var i = 0; i < data.length; i++) {
								var picture = data[i].picture.split(",");
								var imgs;
								if (picture == ""){
									imgs = '';
								}else {
									for (var j = 0; j < picture.length; j++){
										if(j == 0){
											imgs = '<img style = "width: 100px;margin-right: 10px;" src="{{env('IMAGE_DOMAIN')}}' + picture[j] +'" alt="">';
										}else {
											imgs += '<img style = "width: 100px;margin-right: 10px;" src="{{env('IMAGE_DOMAIN')}}' + picture[j] +'" alt="">';
										}
									}
								}
								var tr = $('<tr>'+
											'<td>'+(i+(page-1)*10+1)+'</td>'+
											'<td>'+data[i].ordernumber+'</td>'+
											'<td>'+data[i].code+'</td>'+
											'<td>'+data[i].shopname+'</td>'+
											'<td>'+data[i].score+'</td>'+
											'<td>'+data[i].content+'</td>'+
											'<td style="width: 100px;overflow: scroll;text-align: left;display: inline-block;"><p style="width: ' +110*picture.length+ 'px;" onclick="show_bigpic(this)">'+imgs+'</p></td>'+
											'<td>'+data[i].created_at+'</td>'+
										'</tr>');
								$("#tbody_comment").append(tr);
							};
						}

					}else if(type=="redenvelope"){//红包
						if(data ==""){
							$("#tbody_red_envelope").html("<tr><td colspan='6' style='font-size: 18px;color: #333;'>~红包无数据~</td></tr>");return;
						}else{
						    console.log(data);
							$("#tbody_red_envelope").empty();
                            var redenvelope_status;
							for (var i = 0; i < data.length; i++) {
                                var starttime = data[i].starttime.substring(0,10);
                                var endtime = data[i].endtime.substring(0,10);
                                if(data[i].status == 0){
                                    redenvelope_status = "未使用";
                                }else if(data[i].status == 1){
                                    redenvelope_status = "已使用";
                                }else if(data[i].status == 2){
                                    redenvelope_status = "已过期";
                                }else if(data[i].status == 3){
                                    redenvelope_status = "退款失效";
                                }else if(data[i].status == 4){
                                    redenvelope_status = "退款失效";
                                }
							    if(data[i].shopid == 0 && data[i].minimumamount == 0 && data[i].cityid == 0){
                                    var tr = $('<tr>'+
                                        '<td>'+(i+(page-1)*10+1)+'</td>'+
                                        '<td>'+data[i].amount+'</td>'+
                                        '<td>无限制</td>'+
                                        '<td>红包期限:'+starttime+' 至 '+endtime+'</td>'+
                                        '<td>'+redenvelope_status+'</td>'+
                                        '<td>'+data[i].created_at+'</td>'+
                                        '</tr>');
								}else{
                                    var tr = $('<tr>'+
                                        '<td>'+(i+(page-1)*10+1)+'</td>'+
                                        '<td>'+data[i].amount+'</td>'+
                                        '<td>'+(data[i].cityid == 0?"":"仅限"+data[i].cityname+"使用")+(data[i].shopid == 0?"":"仅限"+data[i].shopid+"使用")+(data[i].minimumamount == 0?"":"满"+data[i].minimumamount+"使用")+'</td>'+
                                        '<td>红包期限:'+starttime+' 至 '+endtime+'</td>'+
                                        '<td>'+redenvelope_status+'</td>'+
                                        '<td>'+data[i].created_at+'</td>'+
                                        '</tr>');
								}
								$("#tbody_red_envelope").append(tr);
							};
						}

					}
				}else{
					alert(data.message)
				}
			},
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
		});
	}
	usercount(type,page)
	//用户信息切换
	$('.user_details_title span').click(function(){
		var i = $(this).index();
		$('.user_details_title span').eq(i).css({"border": "1px solid #9955c6","color": "#9955c6"}).siblings().css({"border": "1px solid #ccc","color": "#000"});
		$('.user_details_list table').eq(i).show().siblings().hide();
		type = $('.user_details_title span').eq(i).attr("class");
		page = 1;
		usercount(type,page)
	});
	//下一页
	$("#next_page").click(function(){
		page++;
		usercount(type,page);
	})
	//上一页
	$("#last_page").click(function(){
		page--;
		usercount(type,page);
	})
    $(".bigpic_out").height($(window).height());
    $(".bigpic_img").height($(window).height());
    var piclength;
    function show_bigpic(_this){
        piclength = $(_this).children("img").length;
        pic_array = [];
        if(piclength > 0){
            $(".bigpic_out").show();
            for (var i = 0; i < piclength; i++) {
                var img_src = $(_this).children("img").eq(i).attr("src")
                pic_array.push(img_src)
            };
            var big_imgs;
            for (var i = 0; i < pic_array.length; i++){
                if(i == 0){
                    big_imgs = '<img style="opacity: 1;" class="pic_show" src="' + pic_array[i] +'" alt="">';
                    $(".bigpic_img").append(big_imgs);
                }else {
                    big_imgs = '<img class="pic_show" src="' + pic_array[i] +'" alt="">';
                    $(".bigpic_img").append(big_imgs);
                    if($(".bigpic_out .pic_show").eq(i).height() < $(".bigpic_out .pic_show").eq(i).width()){
                        $(".bigpic_out .pic_show").eq(i).css({"height":"auto","width":"90%"});
                        var pich = $(".bigpic_out .pic_show").eq(i).height();
                        var picw = $(".bigpic_out .pic_show").eq(i).width();
                        $(".bigpic_out .pic_show").eq(i).css({"margin-top": -pich/2,"margin-left": -picw/2});
                    }else{
                        $(".bigpic_out .pic_show").eq(i).css({"height":"90%","width":"auto"});
                        var pich = $(".bigpic_out .pic_show").eq(i).height();
                        var picw = $(".bigpic_out .pic_show").eq(i).width();
                        $(".bigpic_out .pic_show").eq(i).css({"margin-top": -pich/2,"margin-left": -picw/2});
                    }
                }
            }
            if($(".bigpic_out .pic_show").eq(0).height() < $(".bigpic_out .pic_show").eq(0).width()){
                $(".bigpic_out .pic_show").eq(0).css({"height":"auto","width":"90%"});
                var pich = $(".bigpic_out .pic_show").eq(0).height();
                var picw = $(".bigpic_out .pic_show").eq(0).width();
                $(".bigpic_out .pic_show").eq(0).css({"margin-top": -pich/2,"margin-left": -picw/2});
            }else{
                $(".bigpic_out .pic_show").eq(0).css({"height":"90%","width":"auto"});
                var pich = $(".bigpic_out .pic_show").eq(0).height();
                var picw = $(".bigpic_out .pic_show").eq(0).width();
                $(".bigpic_out .pic_show").eq(0).css({"margin-top": -pich/2,"margin-left": -picw/2});
            }
            $(".pic_num").html("1/" + piclength);
        }
    }
    var picx = 0;
    $(".pic_right").on("click",function () {
        picx++;
        if(picx < piclength){
            $(".bigpic_img .pic_show").eq(picx).css("opacity", "1").siblings().css("opacity", "0");
            $(".pic_num").html((picx+1) + "/" + piclength);
        }else {
            picx = piclength-1;
        }
    })
    $(".pic_left").on("click",function () {
        picx -= 1;
        if(picx < 0){
            picx = 0;
        }else {
            $(".bigpic_img .pic_show").eq(picx).css("opacity", "1").siblings().css("opacity", "0");
            $(".pic_num").html((picx+1) + "/" + piclength);
        }
    })
    $(".bicpic_close").on("click",function () {
        $(".bigpic_out").hide();
        $(".bigpic_img").empty();
        picx = 0;
    })
</script>
@endsection